<template>
  <h3>方法一不基于element-plus 样式需要重新写</h3>
  <div v-for="(item, index) in config" :key="index">
    <div v-if="item.type === 'input'">
      <span>{{ item.label }}</span>
      <input type="text" v-model="searchForm[item.prop]" :placeholder="item.placeholder">
    </div>
    <div v-if="item.type === 'select'">
      <span>{{ item.label }}</span>
      <select v-model="searchForm[item.prop]" :placeholder="item.placeholder">
        <option
            v-for="item in item.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </select>
    </div>
    <div v-if="item.type==='textarea'">
      <textarea v-model="searchForm[item.prop]" :placeholder="item.placeholder || ''"></textarea>
    </div>
  </div>
  <button @click="search">查询</button>
  <button @click="reset">重置</button>
<!--  <h3>方法二:方法二基于element-plus</h3>-->
<!--  <el-form :inline="true" :model="searchForm" class="demo-form-inline">-->
<!--    <div v-for="(item, index) in config" :key="index">-->
<!--      <el-form-item :label="item.label" v-if="item.type === 'input'">-->
<!--        <el-input v-model="searchForm[item.prop]" :placeholder="item.placeholder||''"/>-->
<!--      </el-form-item>-->
<!--      <el-form-item :label="item.label" v-if="item.type === 'select'">-->
<!--        <el-select v-model="item.options" :placeholder="item.placeholder">-->
<!--          <el-option-->
<!--              v-for="item in item.options"-->
<!--              :key="item.value"-->
<!--              :label="item.label"-->
<!--              :value="item.value"-->
<!--          />-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item :label="item.label" v-if="item.type === 'textarea'">-->
<!--        <el-input type="textarea" v-model="searchForm[item.prop]" :placeholder="item.placeholder || ''"/>-->
<!--      </el-form-item>-->
<!--    </div>-->
<!--    <el-form-item>-->
<!--      <el-button @click="search">查询</el-button>-->
<!--      <el-button @click="reset">重置</el-button>-->
<!--    </el-form-item>-->
<!--  </el-form>-->

  <div>{{ shallowRefState }}</div>
  <button @click="shallowRefChange">改变state.b.c</button>
</template>

<script>
import {reactive, toRefs,shallowRef,triggerRef} from 'vue';

export default {
  name: 'SearchForm',
  emits: ['update:form', 'search', 'reset'],
  props: {
    form: {
      type: Object,
      default: () => {
      }
    },
    config: {
      type: Array,
      default: () => []
    }
  },
  setup(props, {emit}) {
    // 其中shallowRef为非递归监听，ref为递归监听，
    // 与shallowReactive和reactive不同的是shallowRef和ref监听的对象首层是value这一层，
    // 只有当value发生改变时shallowRef声明的变量才会在视图上进行更新。
    const state = reactive({
      searchForm: JSON.parse(JSON.stringify(props.form)),	// 深拷贝表单对象 不直接修改props
    })
    const bindfn = {
      search() {
        emit('update:form', state.searchForm)	// 更新数据
        emit('search')	// 触发查询
      },
      reset() {
        emit('update:form', state.searchForm)	// 更新数据
        emit('search')	// 触发查询
      }
    }
    const shallowRefState = shallowRef({
      a: 'a',
      b: {
        c: 'c',
        d: {
          e: 'e',
        },
      },
    })
    function shallowRefChange() {
      shallowRefState.value.b.c = 99999
      triggerRef(shallowRefState)//triggerRef的作用则是手动执行与 shallowRef 关联的任何副作用，强制更新视图。
    }
    return {
      ...toRefs(state),
      ...bindfn,
      shallowRefChange,
      shallowRefState,
    }
  }
}
</script>
